<template>
  <div class="css-3d-tree-js size-full">
    <div class="css-3d-tree-js-container">
      <div
        class="css-3d-tree-js-pointer"
        v-for="(item, i) in arr"
        :key="i"
        :style="`animation-delay: -${(i%25) * 100}ms;`"
      ></div>
    </div>
  </div>
</template>

<script setup>
const arr = new Array(700).fill(undefined)
</script>

<style scoped lang="scss">
.css-3d-tree-js {
  background-color: #2c3e50;
  overflow: hidden;
  transform-style: preserve-3d;
  perspective: 12000px;
  position: relative;

  .css-3d-tree-js-container {
    height: 2700px;
    width: 2000px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotateX(71deg) rotateZ(-64deg);
    transform-origin: center;

    transform-style: preserve-3d;
    perspective: 3000px;
  }

  .css-3d-tree-js-pointer {
    background-color: rgb(0, 255, 255);
    width: 6px;
    height: 6px;
    border-radius: 3px;
    display: inline-block;
    margin: 36px 36px 52px;

    will-change: transform;

    animation-name: css-3d-tree-js-run;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
  }
}

@keyframes css-3d-tree-js-run {
  from {
    transform: translateZ(-50px) scale(.3);
  }
  to {
    transform: translateZ(50px) scale(1.2);
  }
}
</style>
